• Page, content and block can be created without any coding.
  • before you do anything development, switch to developer mode first, so it won’t load from cache

Command Line Tool

command line tool located in Magento/shared/webroot/bin

usage: php magento <command>

  • php magento deploy:mode:show check current mode
  • php magento deploy:mode:set developer/production switch mode

Path

<theme_dir>

Theme Directory, about custom theme, usually can be found from:

  • app/design/frontend/Magento/<theme>
  • vendor/magento/theme-frontend-<theme>

<module_dir>

Module directory, usually can be found from

  • app/code/Magento/<Module>
  • vendor/magento/module-<module>-<name>

Theme

a frontend developer might need to efficiently create a new theme for storefront or Admin in Magento application

A theme is a component of Magento application which provides a consistent look and feel for entire application area (for example, storefront or Magento admin) using a combination of custom templates, layouts, styles or images.

theme can be standalone or inherited from other theme, Magento Inheritation only allow developers to change certain theme file

Standalone Theme URL

  1. create custom theme folder: app/design/frontend/<your_vendor_name>/<your_theme_name>

  2. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.

    theme.xml contains at least the theme name and the parent theme name (if the theme inherits from one). Optionally you can specify where the theme preview image is stored.

    view.xml configures product image sizes and other properties used on the storefront

  3. Add a composer.json file.

  4. Add registration.php to register your theme in the system.

  5. Add a web folder then create directories for CSS, JavaScript, images, and fonts in it.

    • default
  6. Configure your theme in the Admin panel.

  7. The new created theme will automatically registered once you login or reload the admin page

  8. use the new theme in the content/configuration